<template>
    <div class="u-chartsBox">
        <div class="legend" :class="[type,position]" v-if="!disLegend">
            <span v-for="(item,index) in legend" :key="index">
                <i :style="'background:'+ item.color +';'"></i>{{item.name}}
            </span>
        </div>
        <div class="chartsM" :id="'chartsBox_radar'+keyId"></div>
    </div>
</template>
<script>
import "@/utils/util"
export default {
    name:'URadarEchart',
    props:{
        keyId:{},               //唯一echart
        disLegend: Boolean,     //不显示标签
        type:{                  //标签的图标类型 pie圆点   
            type: String,
            default: "pie"
        },
        position:{              //标签的位置  默认右上
            type: String,
            default: "right"
        },
        shapeType:{             //'polygon'矩形   'circle'圆形
            type: String,
            default: "polygon"
        },

        legend: Array,
        list: Array,                   
    },
    data(){
        return{
            chartsObj: null,
            option:{}
        }
    },
    mounted(){
        this.initChart()
        
    },
    methods:{
        initChart(){
            this.chartsObj = this.$echarts.init(document.getElementById('chartsBox_radar'+this.keyId));
            let len = this.list[0].value.length
            let dataAxis = []                   //横坐标
            let dataInfo = {} ;
            let seriesData = []

            dataAxis = this.list.map(item => {
                return {name: item.name, max: item.radarMax}
            })

            for(let i=0; i<len; i++){
                dataInfo[i] = {}
                dataInfo[i] = this.list.map(item => {
                    return item.value[i]
                })
                seriesData.push({
                    value: dataInfo[i],
                    name: this.legend[i].name,
                    lineStyle: {
                        color: this.legend[i].color
                    },
                    itemStyle: {
                        borderColor:this.legend[i].color
                    },
                    areaStyle: {
                        color: this.legend[i].color.colorRGBA(.2)
                    }
                })
            }
            // let reslist = Object.values(dataInfo); // list 转换成功的数据     


            this.option = {
                tooltip: {
                    formatter: (params)=>{
                        let {value, name} = params
                        let spanVal = ''
                        value.forEach((every,index) => {
                            spanVal +='<br><span>'+dataAxis[index].name+"："+every+'</span>'
                        })
                        return '<span class="tooltip_title">'+name+'</span>'+spanVal
                    },
                    backgroundColor: "#ffffff",
                    padding: 16,
                    textStyle:{
                        color:"#333333",
                        lineHeight: 30
                    },
                    extraCssText: 'box-shadow: 0 1px 10px rgba(59, 100, 168, 0.2); width: 160px; min-height:90px;'
                },
                legend: {
                    show: false,
                },
                textStyle:{
                    color: '#747e93',
                    fontSize: 16,
                },
                radar: {
                    center: ['50%', '50%'],
                    radius: '60%',
                    name: {
                        textStyle: this.shapeType=='polygon'?{
                            backgroundColor: '#f3f5f7',
                            borderRadius: 32,
                            padding: [8, 16]
                        }:{}
                    },
                    splitNumber: 4,
                    shape:this.shapeType,      
                    indicator: dataAxis,
                    axisLine:{
                        lineStyle:{
                            color:"#cdd5dd",
                            type:"dashed"
                        }
                    },
                    splitLine:{
                        lineStyle:{
                            color:"#e4e8ec",
                            width:2,
                        }
                    },
                    splitArea:{
                        areaStyle:{
                            color:['rgba(235,238,242,.55)','rgba(255,255,255,.55)']
                            
                        }
                    }
                },
                series: [{
                    type: 'radar',
                    symbolSize: 12,
                    lineStyle: {
                        width: 2,
                    },
                    itemStyle: {
                        borderWidth: 3,
                        color: "#fff",
                    },
                    data:seriesData,
                }]
            };
            
            // 使用刚指定的配置项和数据显示图表。
            this.chartsObj.setOption(this.option);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
        setChart(chartData){
            chartData = chartData || {}
            this.chartsObj.hideLoading()
            this.chartsObj.setOption(chartData);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
    }
}
</script>